<template>
    <div>
        <div class="container">
            <div class="height70"></div>
            <div class="container-title">公司文化</div>
            <div class="height70"></div>
            <div class="height70"></div>
        </div>
        <div class="enterprise">
            <div class="container">
                <div class="top-wapper">
                    <div class="top-1" @click="lookImagesClick(imgUrl1)">
                        <img :src="imgUrl1" alt="">
                    </div>
                    <div class="top-2" @click="lookImagesClick(imgUrl2)">
                        <img :src="imgUrl2" alt="">
                    </div>
                    <div class="top-3" @click="lookImagesClick(imgUrl3)">
                        <img :src="imgUrl3" alt="">
                    </div>
                    <div class="top-4" @click="lookImagesClick(imgUrl4)">
                        <img :src="imgUrl4" alt="">
                    </div>
                </div>
                <div class="bottom-wapper">
                    <div class="left"  @click="lookImagesClick(imgUrl5)">
                        <img :src="imgUrl5" alt="">
                    </div>
                    <div class="right">
                        <div class="right-1"  @click="lookImagesClick(imgUrl6)">
                           <img :src="imgUrl6" alt="">
                        </div>
                        <div class="right-2">
                             <div class="right-top">
                                <div class="right-top-1"  @click="lookImagesClick(imgUrl7)">
                                    <img :src="imgUrl7" alt="">
                                </div>
                                <div class="right-top-2"  @click="lookImagesClick(imgUrl8)">
                                    <img :src="imgUrl8" alt="">
                                </div>
                            </div>
                            <div class="right-bottom"  @click="lookImagesClick(imgUrl9)">
                                <img :src="imgUrl9" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="height70"></div>
        <div class="height70"></div>

        <div class="pock" v-show="pock" @click="closeClick"></div>
        <transition leave-active-class="animated bounceOut"  enter-active-class="animated bounceIn">
            <div v-show="close" class="pock-wrapper"  @click="closeClick">
                <div class="pock-desc">周年活动照片图集</div>
                <div class="pock-title">周年庆典</div>
                <img class="pock-Url" :src="pockUrl" alt="">
            </div>
        </transition>
       
    </div>
</template>

<script>
export default {
    data () {
        return {
            imgUrl1:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498089716&di=3443ea83878684942dbffdf4ba2cf9cc&imgtype=0&src=http%3A%2F%2Fupload.news.cecb2b.com%2F2015%2F0409%2F1428565327309.jpg',
            imgUrl2:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498090199&di=a2422136cb85d92a2d15e246d2ded99d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Ddc1f152a8d94a4c21e2eef68669d71a0%2F7c1ed21b0ef41bd5a7f91cd15bda81cb39db3d68.jpg',
            imgUrl3:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498090199&di=7be18f400bb768315eeb627db3bd37e8&imgtype=0&src=http%3A%2F%2Fattachment.jmw.com.cn%2Fimport%2Fimage%2Fyjz%2F9iY4ebVt3oYt.png',
            imgUrl4:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498153418&di=9db9e05c5b10280970698309c899290b&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D2914098696%2C2757997979%26fm%3D214%26gp%3D0.jpg',
            imgUrl5:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498175811&di=f28b5923725107df508352cda90b4ab7&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dce2966a2daa20cf4529df69c1e602143%2F30adcbef76094b363b04fac8a9cc7cd98d109d05.jpg',
            imgUrl6:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498175811&di=04b28383d4755081adcfd8631490a19e&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D18ca5ac65d2c11dfcadcb7600b4e08a5%2Fa8ec8a13632762d08d10399aaaec08fa513dc6ed.jpg',
            imgUrl7:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219737&di=70420c3c26d8d9aa8188c85c363f5d83&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-05-21%2F1400649559-O43FYVW_960_600.jpg',
            imgUrl8:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219733&di=b2b333844c612e3824a23e44af34438b&imgtype=0&src=http%3A%2F%2Fpic.597.com%2Fcom%2F2016%2F04%2F28%2F16042802191941245.jpg',
            imgUrl9:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219729&di=778d1886c91651cff955fd7aadafee0e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ca9a596d861aa8012193a34d3d1e.jpg',
            pockUrl:'',
            pock:false,
            close:false
        }
    },
    methods:{
        lookImagesClick (Url) {
            console.log(Url)
            this.pockUrl = Url
            this.pock = true
            setTimeout (() => {
                this.close = true
            },50)
        },
        closeClick () {
            this.close = false
            setTimeout (() => {
                this.pock = false
            },500)
        }
    }
}
</script>

<style lang="stylus" scoped>
    .pock
        position fixed
        top 0
        left 0
        bottom 0
        right 0
        background-color rgba(#000,.7)
        z-index 100
    .pock-wrapper
        position fixed
        left 0
        right 0
        top 0
        bottom 0
        z-index 101
        width 1000px
        height 600px
        margin auto
        color #fff
        overflow hidden
        .pock-desc
            font-size 16px
            font-weight bold
            margin-bottom 15px
        .pock-title
            font-size 38px
            font-weight bold
            margin-bottom 10px  
        .pock-Url
            width 100%          
    .container
        padding 0
    .enterprise
        height: 500px;
        position relative
        border 1px solid #fff
        img 
            width 100%
            height 100%
            object-fit cover
        > div
            height 500px
            background-color #eee
            position relative
            z-index 1
            cursor pointer
        &:after
            content ''
            position absolute
            top 0
            bottom 0
            margin auto
            width 100%
            height 230px
            z-index -1
             
        .top-wapper
            height 178px
            display flex
            > div
                background-color red
                border 1px solid #fff
            .top-1
                flex 3
            .top-2
                flex 2.03
            .top-3
                flex 3.5
            .top-4
                flex 1.5
        .bottom-wapper
            display flex
            height 322px
            > div   
                flex 1
            .left
                border 1px solid #fff
                background-color red
            .right
                display flex
                .right-1    
                    width 220px
                    height 320px
                    border 1px solid #fff
                    background-color red
                .right-2
                    flex 1
                    .right-top
                        display flex
                        height 175px
                        .right-top-1
                            width 183px
                            background-color red
                            border 1px solid #fff
                        .right-top-2
                            flex 1
                            background-color red
                            border 1px solid #fff
                    .right-bottom
                        height 145px
                        background-color red 
                        border 1px solid #fff       
</style>                

